Fix sidebar v2 thread control overlap - #4553
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
vouch:unvouched
AadiJo
changed the title
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
ApprovabilityVerdict: Approved This PR contains only CSS/Tailwind class changes to fix a visual overlap issue and improve keyboard focus accessibility in the sidebar. No logic or runtime behavior changes - purely styling adjustments. You can customize Macroscope's approvability policy. Learn more. |
Dismissing prior approval to re-evaluate 0d0996c
Dismissing prior approval to re-evaluate c8d8b00
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit c8d8b00. Configure here.
1 participant
What Changed
Updated the sidebar v2 thread lifecycle controls so the Snooze and Settle actions render
over an opaque, row-matched surface with a subtle left-edge fade and shadow.
This prevents long project names from remaining visible underneath the controls when a
thread row is hovered or keyboard-focused.
Why
Long project names could overlap the Snooze and Settle controls, making both the project
name and actions difficult to read.
The existing dark-mode row colors are translucent, so simply reusing those colors did not
fully obscure the text beneath the controls. This change composites the dark row color
against the sidebar background to produce the same appearance with full opacity.
UI Changes
Before
The project name remains visible underneath the lifecycle controls.
After
The project name fades beneath an opaque surface before reaching the Snooze and Settle
controls.
Validation
SidebarV2.tsxChecklist
Note
Low Risk
Scoped CSS and visibility tweaks in
SidebarV2.tsxonly; no logic, API, or data changes.Overview
Fixes Snooze/Settle overlapping long project names on sidebar v2 card thread rows.
The status/time label now fades on
group-focus-withinas well as hover, so keyboard focus matches pointer hover. The Snooze/Settle control strip gets layering (z-10,isolate), a left gradient fade and shadow, and shows ongroup-focus-withinin addition to hover.Control backgrounds are row-state aware (active, selected, default hover) and use
color-mixin dark mode so the strip is fully opaque while still matching the translucent row tints—so project title text no longer shows through under the buttons.Reviewed by Cursor Bugbot for commit c68e294. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Fix action button and timestamp overlap in SidebarV2 rows
SidebarV2Rownow hides when the row or any descendant has focus (group-focus-within/v2-row:opacity-0), matching the existing hover behavior.z-indexto ensure they remain interactive.Macroscope summarized c68e294.